<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ext Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="resoures/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="resoures/css/ext-all.css">
</head>
<body>
<script type="text/javascript" src="resoures/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="resoures/js/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="resoures/js/ext-all.js"></script>
<script type="text/javascript" src="resoures/js/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
    Ext.BLANK_IMAGE_URL = "resoures/images/default/s.gif";
    var myData = [
        ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
    ];
    var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(myData),
        reader: new Ext.data.ArrayReader({id: 0}, [
            {name: 'company'},
            {name: 'price', type: 'float'},
            {name: 'change', type: 'float'},
            {name: 'pctChange', type: 'float'},
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ])
    });
    var colModel = new Ext.grid.ColumnModel([
        {header: "Company", width: 120, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 90, sortable: true, dataIndex: 'price'},
        {header: "Change", width: 90, sortable: true, dataIndex: 'change'},
        {header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
        {header: "Last Up&#100;ated", width: 120, sortable: true,
            renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ]);
    var Grid = new Ext.grid.GridPanel({
        store: ds,
        cm: colModel,
        tbar:[{
            text : "button",
            tooltip : "this is a button.",
            id : "btn_default",
            iconCls : "default",
            handler:function(){

            }
        }]
    });
    var Layout = function() {
        new Ext.Viewport({
            layout: 'border',
            items: [{
                region: 'north',
                html: '<h1 class="x-panel-header">Page Title</h1>',
                autoHeight: true,
                border: false,
                margins: '0 0 5 0'
            }, {
                region: 'west',
                collapsible: true,
                title: 'Navigation',
                xtype: 'treepanel',
                width: 200,
                autoScroll: true,
                split: true,
                loader: new Ext.tree.TreeLoader(),
                root: new Ext.tree.AsyncTreeNode({
                    expanded: true,
                    children: [{
                        text: 'Menu Option 1',
                        leaf: true
                    }, {
                        text: 'Menu Option 2',
                        leaf: true
                    }, {
                        text: 'Menu Option 3',
                        leaf: true
                    }]
                }),
                rootVisible: false,
                listeners: {
                    click: function (n) {
                        Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
                    }
                }
            }, {
                region: 'center',
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{
                    title: 'Default Tab',
                    html: 'The first tab\'s content. Others may be added dynamically.'
                },{
                    title: 'Grid Tab',
                    layout:'fit',
                    items:Grid
                }]
            }, {
                region: 'south',
                title: 'Information',
                collapsible: true,
                html: 'Information goes here',
                split: true,
                height: 100,
                minHeight: 100
            }]
        });
    };
    $(function () {
        Layout();
        ds.load();
    });
</script>
</body>
</html>